<template>
	<view class="content">
		<view class="headercontent">
			<view class="back-box" @click="goback">
				<image :src="proxy.serverimageUrl + 'back-black.png'" mode=""></image>
				<!-- <image :src="../../static/member/back-black.png" mode=""></image> -->
				<view class="text" v-if="type == '1'">会员访问</view>
				<view class="text" v-if="type == '2'">会员收藏</view>
				<view class="text" v-if="type == '3'">会员分享</view>
			</view>
		</view>

		<view class="table-content">
			<z-paging :paging-style="{ height: '100%' }" default-page-no="1" default-page-size="8" :fixed="false"
				ref="paging" @query="queryList">
				<view class="table-item" v-for="(item, index) in dataList" :key="index">
					<view style="display: flex; align-items: center">
						<image class="avatar" :src="item.avatar" mode="" @click="gomenber(item.mid)"></image>
						<view class="item-center">
							<view class="title-name">
								<view class="nametext">
									{{ item.memberName }}
								</view>
								<image :src="proxy.serverimageUrl + 'member/1.png'"
									v-if="item.employmentSituation == '会长'" mode=""></image>
								<image v-if="item.employmentSituation == '副会长'"
									:src="proxy.serverimageUrl + 'member/2.png'" mode=""></image>
								<image v-if="item.employmentSituation == '理事'"
									:src="proxy.serverimageUrl + 'member/3.png'" mode=""></image>
								<image v-if="item.employmentSituation == '会员'"
									:src="proxy.serverimageUrl + 'member/4.png'" mode=""></image>
								<image v-if="item.employmentSituation == '监事长'"
									:src="proxy.serverimageUrl+'member/5.png'" mode="">
								</image>
								<image v-if="item.employmentSituation == '秘书长'"
									:src="proxy.serverimageUrl+'member/6.png'" mode="">
								</image>
								<image v-if="item.employmentSituation == '监事'"
									:src="proxy.serverimageUrl+'member/7.png'" mode="">
								</image>
								<image v-if="item.employmentSituation == '党支部书记'" src="../../static/8.png" mode="">
								</image>
								<image v-if="item.employmentSituation == '兼职副秘书长'" src="../../static/9.png" mode="">
								</image>
								<image v-if="item.employmentSituation == '执行会长'" src="../../static/10.png" mode="">
								</image>
								<image v-if="item.employmentSituation == '专职副秘书长'" src="../../static/11.png" mode="">
								</image>
							</view>
							<p class="p1">{{ item.workUnit }}</p>
							<p class="p1 p2" v-if="item.type == 1">访问时间: {{ item.accessTime }}</p>
							<p class="p1 p2" v-if="item.type == 3">被分享: {{ item.sharingFrequency }}</p>
							<p class="p1 p2" v-if="item.type == 2">被收藏: {{ item.collectionNumber }}</p>
						</view>
					</view>

					<view class="btn">
						<up-button color="#2854B7" v-if="!item.status || item.status == 0" @click="collect(1, item.mid)"
							shape="circle" :text="btntext"></up-button>
						<up-button color="#E8EFFE" v-if="item.status == 1" @click="collect(2, item.mid)"
							class="custom-style" shape="circle" text="已收藏"></up-button>
					</view>
				</view>
			</z-paging>
		</view>
	</view>
</template>

<script setup>
	import {
		collectionsList,
		historyList,
		shareList,
		cancelCollections,
		collections
	} from '../../utils/api.js';
	import {
		reactive,
		ref,
		getCurrentInstance
	} from 'vue';
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app';
	import useZPaging from "@/uni_modules/z-paging/components/z-paging/js/hooks/useZPaging.js";

	const customStyle = reactive({
		color: '#2854B7'
	});
	// const mid = ref('')
	const parentmid = ref('');
	const cmid = ref(uni.getStorageSync('mid'));
	const typeindex = ref(null);
	const type = ref('');
	const paging = ref(null);
	const btntext = ref('');
	onLoad((o) => {
		type.value = o.type;
		typeindex.value = o.coltype;
		if (o.type == 1 || o.type == 3) {
			btntext.value = '访问';
		} else {
			btntext.value = '收藏';
		}
		if (o.mid) {
			parentmid.value = o.mid;
		}
		// getlist(parentmid.value);
	});
	const {
		proxy,
		ctx
	} = getCurrentInstance();
	//返回上一级页面
	const goback = () => {
		uni.navigateBack();
	};
	/*跳转会员详情*/
	const gomenber = (mid) => {
		uni.navigateTo({
			url: '/subpages/memberdetail/index?mid=' + mid
		});
	};
	//点击收藏或者访问
	const collect = (types, mid) => {
		if (type.value == 1 || type.value == 3) {
			if (mid === cmid.value) {
				uni.switchTab({
					url: '/pages/Mypage/index'
				});
			} else {
				uni.navigateTo({
					url: '/subpages/memberdetail/index?mid=' + mid
				});
			}
		} else {
			if (types == 1) {
				let params = {
					cmid: cmid.value,
					mid: mid
				};
				collections(params).then((res) => {
					if (res.code == 200) {
						setTimeout(() => {
							uni.showToast({
								title: '收藏成功',
								duration: 1000,
								icon: 'success'
							});
							setTimeout(() => {
								uni.hideToast();
								if (type.value == 1 || type.value == 3) {
									btntext.value = '访问';
								} else {
									btntext.value = '收藏';
								}
							}, 1000);
						}, 0);
					}
				});
			} else {
				let params = {
					cmid: cmid.value,
					mid: mid
				};
				cancelCollections(params).then((res) => {
					setTimeout(() => {
						uni.showToast({
							title: '取消收藏成功',
							duration: 1000,
							icon: 'success'
						});
						setTimeout(() => {
							uni.hideToast();
							if (type.value == 1 || type.value == 3) {
								btntext.value = '访问';
							} else {
								btntext.value = '收藏';
							}
						}, 1000);
					}, 0);
				});
			}
		}
	};
	//请求列表的数据
	const paramsdata = ref({
		pageNum: 1,
		pageSize: 8,
		mid: null,
		cmid: null,
		type: 0
	});
	//列表数据空数组
	const dataList = ref([]);
	//请求列表接口方法
	const queryList = (pageNum, pageSize) => {
		paramsdata.value.pageNum = pageNum;
		paramsdata.value.pageSize = pageSize;
		if (typeindex.value == '1') {
			paramsdata.value.mid = null;
			paramsdata.value.type = 1;
		} else {
			paramsdata.value.mid = parentmid.value ? parentmid.value : null;
			paramsdata.value.type = 0;
		}
		paramsdata.value.cmid = cmid.value ? cmid.value : null;
		if (type.value == 2) {
			collectionsList(paramsdata.value).then((res) => {
				if (res.code == 200) {
					const list = res.rows
					paging.value.complete(dataList.value);
				}
			});
		} else if (type.value == 1) {
			historyList(paramsdata.value).then((res) => {
				if (res.code == 200) {
					const list = res.rows
					paging.value.complete(list);
				}
			});
		} else {
			shareList(paramsdata.value).then((res) => {
				if (res.code == 200) {
					const list = res.rows
					paging.value.complete(list.value);
				}
			});
		}
	};
</script>

<style lang="scss" scoped>
	.content {
		height: 100vh;
		padding: 114rpx 40rpx 0;
		background-color: #ffffff;

		.headercontent {
			margin-bottom: 36rpx;

			.back-box {
				display: flex;
				align-items: center;

				image {
					width: 18rpx;
					height: 34rpx;
				}

				.text {
					margin-left: 20rpx;
					font-family: Alibaba PuHuiTi;
					font-weight: 500;
					font-size: 36rpx;
					color: #202020;
				}
			}
		}

		.table-content {
			box-sizing: border-box;
			height: calc(100vh - 250rpx);
			padding-top: 60rpx;

			.table-item {
				margin-bottom: 72rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.avatar {
					width: 118rpx;
					height: 118rpx;
					border-radius: 50%;
				}

				.item-center {
					margin-left: 28rpx;

					.title-name {
						display: flex;
						align-items: center;

						.nametext {
							font-family: Alibaba PuHuiTi;
							font-weight: 500;
							font-size: 34rpx;
							color: #252525;
						}

						image {
							width: 104rpx;
							height: 43rpx;
						}
					}

					.p1 {
						margin-top: 18rpx;
						font-family: Alibaba PuHuiTi;
						font-weight: 400;
						font-size: 24rpx;
						color: #bbc0ca;
					}

					.p2 {
						margin-top: 13rpx;
					}
				}

				.btn {
					margin-left: 32rpx;
					width: 140rpx;
					height: 60rpx;
				}
			}
		}
	}
</style>